<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>评价管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索区域 -->
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
			<el-form-item label="评价内容">
				<el-input v-model="queryInfo.content" clearable @click="queryDataList" placeholder="请输入评价内容" />
			</el-form-item>
			<el-form-item label="评分">
				<el-input v-model="queryInfo.score" placeholder="请输入评分" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryDataList">搜索</el-button>
				<el-button type="danger" @click="batchRemove">批量删除</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格区域 -->
		<el-table :data="dataList" border style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="85" />
			<el-table-column prop="content" label="评价内容" />
			<el-table-column prop="score" label="评分" />
			<el-table-column prop="sysUser.username" label="用户" />
			<el-table-column prop="time" label="评价时间" />
			<el-table-column prop="counselor.name" label="咨询师" />
			<el-table-column label="操作" width="200">
				<template #default="scope">
					<el-button type="danger" @click="remove(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
			:page-sizes="[5, 10, 15, 20]" :size="default" layout="total, sizes, prev, pager, next, jumper"
			:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		<el-pagination @size-change="handleSizeChange" @currentchange="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total" />
	</div>

</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';

	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';

	import {
		Plus
	} from '@element-plus/icons-vue'

	// 查询信息对象
	const queryInfo = reactive({
		content: '',
		score: '',
		pageNum: 1,
		pageSize: 5
	})

	//当前数据量
	const total = ref(0)

	//当前页数据
	const dataList = ref([])

	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	//定义查询数据函数
	const queryDataList = () => {
		axios.get('CounselorComment/page', {
			params: queryInfo
		}).then((resp) => {
			if (resp.code == 200) {
				dataList.value = resp.data.list
				total.value = resp.data.total
			} else {
				ElMessage,
				error('数据查询失败')
			}
		})
	}

	//组件加载完毕 查询数据
	onMounted(() => {
		queryDataList()
	})

	//存储复选的数据
	const multipleSelection = ref([])

	const handleSelectionChange = (val) => {
		console.log('复选框中选中的', val);
		multipleSelection.value = val.map(item => {
			return item.id
		})
		console.log(multipleSelection.value);
	}

	//分页
	//每页条目数
	const handleSizeChange = (val) => {
		queryDataList()
	}
	//页码改变
	const handleCurrentChange = (val) => {
		queryDataList()
	}



	// 动态标题
	const title = ref('')
	// 控制对话框是否显示
	const dialogFormVisible = ref(false)
	// 新增和修改数据集
	const counselorData = ref({
		counselorAddress: '',
		counselorCertificate: '',
		counselorEmail: '',
		counselorImg: "",
		counselorLevelId: '',
		counselorName: "",
		counselorPhone: "",
		counselorPosts: "1",
		counselorProfile: "",
		id: ""
	})

	const cancle = () => {
		console.log('你点击了取消按钮');
		counselorData.value = {
			counselorAddress: '',
			counselorCertificate: '',
			counselorEmail: '',
			counselorImg: "",
			counselorLevelId: '',
			counselorName: "",
			counselorPhone: "",
			counselorPosts: "1",
			counselorProfile: "",
			id: ""
		}
		dialogFormVisible.value = false
	}

	const confirm = () => {
		if (counselorData.value.id) {
			axios.put('CounselorComment', counselorData.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage({
							message: '修改功',
							type: 'success',
						})
					} else {
						ElMessage.error('修改失败')
					}
					queryDataList()
					dialogFormVisible.value = false //关闭对话框
				})
		} else {
			axios.post('CounselorComment', counselorData.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage({
							message: '新增成功',
							type: 'success',
						})
					} else {
						ElMessage.error('新增失败')
					}
					queryDataList()
					dialogFormVisible.value = false //关闭对话框
				})
		}

	}

	//新增
	const add = () => {
		title.value = '新增咨询师'
		dialogFormVisible.value = true
	}

	//编辑
	const edit = (row) => {
		title.value = '编辑'
		dialogFormVisible.value = true
		//字符化处理
		row.counselorLevelId = row.counselorLevelId + '';
		row.counselorPosts = row.counselorPosts + '';
		counselorData.value = row
	}
	//删除
	const remove = (id) => {
		ElMessageBox.confirm(
			'此操作将永久删除文件，是否继续？',
			'提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete(`CounselorComment/${id}`)
				.then(resp => {
					if (resp.code == 200) {
						ElMessage.success('删除成功')
					} else {
						ElMessage.error('删除失败')
					}
					queryDataList()
				})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除',
			})
		})
	}

	const batchRemove = () => {
		ElMessageBox.confirm(
			'此操作将永久删除文件，是否继续？',
			'提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete(`CounselorComment`, {
					params: {
						ids: multipleSelection.value.join(',')
					}
				})
				.then(resp => {
					if (resp.code == 200) {
						ElMessage.success('删除成功')
					} else {
						ElMessage.error('删除失败')
					}
					queryDataList()
				})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除',
			})
		})
	}
</script>

<style scoped>
	.el-breadcrumb {
		margin-bottom: 15px;
		padding: 0 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.el-pagination {
		margin-top: 15px;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}
</style>